@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_1431416600_6071196.eot');
  /* IE9*/
  src: url('//at.alicdn.com/t/font_1431416600_6071196.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('//at.alicdn.com/t/font_1431416600_6071196.woff') format('woff'), /* chrome、firefox */ url('//at.alicdn.com/t/font_1431416600_6071196.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('//at.alicdn.com/t/font_1431416600_6071196.svg#iconfont') format('svg');
  /* iOS 4.1- */
}
.sprite {
  background: url(../img/sprite.png) no-repeat;
}
.tit1 {
  background-position: 0 -75px;
}
.tit2 {
  background-position: 0 -123px;
}
.tit3 {
  background-position: 0 -178px;
}
.tit4 {
  background-position: 0 -230px;
}
.tit5 {
  background-position: 0 -282px;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.5);
}
.logo {
  padding-left: 20px;
  padding-top: 3px;
  line-height: 50px;
}
.logo h1 {
  display: inline-block;
  width: 137px;
  height: 37px;
  font-size: 0;
}
.logo span {
  font-size: 20px;
  font-family: "\5FAE\8F6F\96C5\9ED1";
  color: #fff;
  vertical-align: middle;
}
.head-link {
  float: right;
  margin-top: 7px;
  margin-right: 20px;
}
.head-link a {
  display: inline-block;
  margin-right: 20px;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 5px 15px;
  font-size: 16px;
  color: #5c5c5c;
}
.head-link a:hover {
  border-color: #d60505;
  color: #d60505;
}
.head-link .link-cur {
  border-color: #d60505;
  color: #d60505;
}
/*侧边小导航*/
#fp-nav ul li {
  margin-bottom: 11px;
  width: 10px;
  height: 10px;
}
#fp-nav a {
  border: 2px solid #fff;
  border-radius: 50%;
}
#fp-nav a:hover {
  background-color: #fff;
}
#fp-nav span {
  display: none;
}
#fp-nav .active {
  background-color: #fff;
}
#fp-nav.right {
  right: 40px;
}
.m-download {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: 250px;
  margin-top: -125px;
  width: 248px;
  height: 330px;
  background-color: #fafafa;
  border-radius: 10px;
}
.m-download .qrcode {
  float: left;
  width: 100%;
  height: 207px;
  background-color: #fff;
  text-align: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.m-download .qrcode-tit {
  margin: 10px 0;
  font-size: 14px;
  font-family: "\5FAE\8F6F\96C5\9ED1";
  color: #333;
}
.m-download .qrcode-pic {
  margin: 0 auto;
  padding-top: 10px;
  width: 149px;
  height: 139px;
  border: 1px solid #fafafa;
}
.m-download .qrcode-pic span {
  display: inline-block;
  width: 130px;
  height: 130px;
  background-position: 0 -340px;
}
.m-download .dow-btn {
  display: inline-block;
  margin: 10px 0 0 43px;
  width: 164px;
  height: 42px;
  line-height: 42px;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  background-color: #b80100;
  text-align: center;
}
.m-download .dow-btn span {
  display: inline-block;
  margin-right: 3px;
  font-size: 21px;
  font-family: iconfont;
}
.m-download .dow-btn:hover {
  background-color: #ce0303;
}
.m-download .iphone {
  background-color: #df2929;
  box-shadow: 0px 2px 0px 1px #b80100;
}
.m-download .iphone:hover {
  background-color: #f02e2e;
  box-shadow: 0px 2px 0px 1px #c70201;
}
.first-pic-one {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -300px;
  margin-top: -170px;
  opacity: 0;
  -webkit-transform: translate(0px, 170px);
      -ms-transform: translate(0px, 170px);
          transform: translate(0px, 170px);
  -webkit-animation: firstOne 2s ease .2s 1 forwards;
          animation: firstOne 2s ease .2s 1 forwards;
}
@-webkit-keyframes firstOne {
  100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}
@keyframes firstOne {
  100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}
.first-pic-two {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -220px;
  margin-left: -590px;
  opacity: 0;
  -webkit-animation: firstTwo 10s linear 2s infinite forwards;
          animation: firstTwo 10s linear 2s infinite forwards;
}
@-webkit-keyframes firstTwo {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    opacity: 1;
  }
}
@keyframes firstTwo {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    opacity: 1;
  }
}
.m-tit {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -215px;
  margin-left: 250px;
  color: #fff;
  opacity: 0;
  -webkit-transform: rotate(45deg) translate(100px, 0px);
      -ms-transform: rotate(45deg) translate(100px, 0px);
          transform: rotate(45deg) translate(100px, 0px);
  -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
          transform-origin: right bottom;
}
.m-tit h2 {
  font-size: 0px;
  width: 350px;
  height: 40px;
}
.m-tit span {
  display: inline-block;
  padding-left: 5px;
  font-size: 18px;
  font-family: "\5FAE\8F6F\96C5\9ED1";
}
.m-tit .fs-16 {
  font-size: 16px;
}
.m-tit .w320 {
  width: 321px;
}
.m-tit-top {
  margin-top: -237px;
}
.m-tit-cur {
  -webkit-animation: tit 2s ease .2s 1 forwards;
          animation: tit 2s ease .2s 1 forwards;
}
@-webkit-keyframes tit {
  100% {
    -webkit-transform: rotate(0deg) translate(0px, 0px);
            transform: rotate(0deg) translate(0px, 0px);
    opacity: 1;
  }
}
@keyframes tit {
  100% {
    -webkit-transform: rotate(0deg) translate(0px, 0px);
            transform: rotate(0deg) translate(0px, 0px);
    opacity: 1;
  }
}
.second {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -225px;
  margin-left: -295px;
  width: 390px;
  height: 450px;
  background: url(../img/second.png) no-repeat;
}
.second .succes {
  margin-left: 210px;
  opacity: 0;
}
.second .succes-cur {
  -webkit-animation: second 2s ease .2s 1 forwards;
          animation: second 2s ease .2s 1 forwards;
}
@-webkit-keyframes second {
  100% {
    opacity: 1;
  }
}
@keyframes second {
  100% {
    opacity: 1;
  }
}
.thirdly {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -210px;
  margin-left: -460px;
  width: 499px;
  height: 420px;
  background: url(../img/thirdly1.png) no-repeat;
  opacity: 0;
}
.thirdly-cur {
  -webkit-animation: thirdlyImg 2s linear 2s 1 forwards;
          animation: thirdlyImg 2s linear 2s 1 forwards;
}
.s-cloud {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -500px;
  width: 498px;
  height: 166px;
  background: url(../img/thirdly2.png) no-repeat;
  opacity: 0;
}
.s-cloud-cur {
  -webkit-animation: cloud 10s linear 2s infinite none;
          animation: cloud 10s linear 2s infinite none;
}
.t-p {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -457px;
  width: 495px;
  height: 257px;
  background: url(../img/sprite_thirdly.png) no-repeat;
  -webkit-transform: translate(0px, 260px);
      -ms-transform: translate(0px, 260px);
          transform: translate(0px, 260px);
  opacity: 0;
}
.t-p-cur {
  -webkit-animation: thirdlyTp 2s ease .2s 1 forwards;
          animation: thirdlyTp 2s ease .2s 1 forwards;
}
@-webkit-keyframes thirdlyImg {
  100% {
    opacity: 1;
  }
}
@keyframes thirdlyImg {
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes thirdlyTp {
  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
    opacity: 1;
  }
}
@keyframes thirdlyTp {
  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
    opacity: 1;
  }
}
@-webkit-keyframes cloud {
  50% {
    opacity: .5;
  }
  100% {
    -webkit-transform: translate(100px, 0px);
            transform: translate(100px, 0px);
    opacity: 0;
  }
}
@keyframes cloud {
  50% {
    opacity: .5;
  }
  100% {
    -webkit-transform: translate(100px, 0px);
            transform: translate(100px, 0px);
    opacity: 0;
  }
}
.phone {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -400px;
  width: 450px;
  height: 450px;
  background: url(../img/four2.png) no-repeat;
  opacity: 0;
}
.phone-cur {
  -webkit-animation: phone 2s ease .2s 1 forwards;
          animation: phone 2s ease .2s 1 forwards;
}
@-webkit-keyframes phone {
  100% {
    opacity: 1;
  }
}
@keyframes phone {
  100% {
    opacity: 1;
  }
}
.hand {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -414px;
  width: 225px;
  height: 172px;
  background: url(../img/four5.png) no-repeat;
  -webkit-transform: translate(-60px, 80px);
      -ms-transform: translate(-60px, 80px);
          transform: translate(-60px, 80px);
  opacity: 0;
}
.hand-cur {
  -webkit-animation: hand 2s ease 2s 1 forwards;
          animation: hand 2s ease 2s 1 forwards;
}
@-webkit-keyframes hand {
  100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}
@keyframes hand {
  100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}
.slass {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -220px;
  margin-top: -225px;
  width: 296px;
  height: 329px;
  background: url(../img/four3.png) no-repeat;
  opacity: 0;
  -webkit-transform: translate(80px, -100px);
      -ms-transform: translate(80px, -100px);
          transform: translate(80px, -100px);
}
.slass-cur {
  -webkit-animation: slass .7s ease 3s 1 forwards;
          animation: slass .7s ease 3s 1 forwards;
}
@-webkit-keyframes slass {
  100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}
@keyframes slass {
  100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}
.type {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -170px;
  margin-top: -139px;
  width: 100px;
  height: 137px;
  background: url(../img/four4.png) no-repeat;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
}
.type-cur {
  -webkit-animation: type .9s ease 3.4s 1 forwards;
          animation: type .9s ease 3.4s 1 forwards;
}
@-webkit-keyframes type {
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes type {
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.star-box {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -330px;
  margin-top: -200px;
  width: 299px;
  height: 334px;
}
.star-box div {
  background: url(../img/four1.png) no-repeat;
}
.star-box .star1 {
  width: 45px;
  height: 47px;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
}
.star-box .star2 {
  margin-top: 100px;
  margin-left: 5px;
  width: 30px;
  height: 30px;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  background-position: -62px -14px;
}
.star-box .star3 {
  margin-top: 100px;
  margin-left: 280px;
  width: 30px;
  height: 30px;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  background-position: -102px -14px;
}
.star-box-cur .star1 {
  -webkit-animation: star 1.5s ease 4s infinite forwards;
          animation: star 1.5s ease 4s infinite forwards;
}
.star-box-cur .star2 {
  -webkit-animation: star 1.5s ease 4.2s infinite none;
          animation: star 1.5s ease 4.2s infinite none;
}
.star-box-cur .star3 {
  -webkit-animation: star 1.5s ease 4.4s infinite none;
          animation: star 1.5s ease 4.4s infinite none;
}
@-webkit-keyframes star {
  0% {
    -webkit-transform: scale(1.1, 1.1);
            transform: scale(1.1, 1.1);
  }
  50% {
    -webkit-transform: scale(0.8, 0.8);
            transform: scale(0.8, 0.8);
  }
  90% {
    -webkit-transform: scale(1.3, 1.3);
            transform: scale(1.3, 1.3);
  }
  100% {
    -webkit-transform: scale(1.1, 1.1);
            transform: scale(1.1, 1.1);
  }
}
@keyframes star {
  0% {
    -webkit-transform: scale(1.1, 1.1);
            transform: scale(1.1, 1.1);
  }
  50% {
    -webkit-transform: scale(0.8, 0.8);
            transform: scale(0.8, 0.8);
  }
  90% {
    -webkit-transform: scale(1.3, 1.3);
            transform: scale(1.3, 1.3);
  }
  100% {
    -webkit-transform: scale(1.1, 1.1);
            transform: scale(1.1, 1.1);
  }
}
.goods {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -350px;
  margin-top: -190px;
  width: 405px;
  height: 415px;
  background: url(../img/five1.png) no-repeat;
  opacity: 0;
  -webkit-transform: translate(0, 200px);
      -ms-transform: translate(0, 200px);
          transform: translate(0, 200px);
}
.goods-cur {
  -webkit-animation: goods 2s ease .2s 1 forwards;
          animation: goods 2s ease .2s 1 forwards;
}
@-webkit-keyframes goods {
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes goods {
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
.goods-type {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -387px;
  margin-top: -227px;
  width: 515px;
  height: 325px;
  background: url(../img/five2.png) no-repeat;
  opacity: 0;
  -webkit-transform: scale(0.5) rotate(50deg);
      -ms-transform: scale(0.5) rotate(50deg);
          transform: scale(0.5) rotate(50deg);
}
.goods-type-cur {
  -webkit-animation: goodst 2s ease 2s 1 forwards;
          animation: goodst 2s ease 2s 1 forwards;
}
@-webkit-keyframes goodst {
  100% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg);
  }
}
@keyframes goodst {
  100% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg);
  }
}
.price {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -165px;
  width: 182px;
  height: 209px;
  background: url(../img/five3.png) no-repeat;
  opacity: 0;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-transform-origin: left top;
      -ms-transform-origin: left top;
          transform-origin: left top;
}
.price-cur {
  -webkit-animation: price 2s ease 3.5s 1 forwards;
          animation: price 2s ease 3.5s 1 forwards;
}
@-webkit-keyframes price {
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes price {
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
